<template>
	<view class="activitySellConfirm" :style="[{paddingTop:statusBar+ 'px'}]">
		<view class="status" :style="[{height:statusBar+ 'px'}]" ></view>
		<view class="navigation" :style="[{top:(statusBar-2)+ 'px'}]">
			<image src="/static/images/back.png" class="back" @click="back()" mode=""></image>
			<view class="navigation-title">{{ title }}</view>
		</view>
		<view class="navigation-position"></view>
		<view class="activity-paid-content">
			<view class="activity-paid-state-content" v-if="!applyComplete">
				<view class="activity-confirm-content-title" v-if="isExcessReturn">本商品将以{{ price }}元的价格申请超额返</view>
				<view class="activity-confirm-content-title" v-else>本商品将以{{ price }}元的价格进行寄售</view>	
				<view class="activity-confirm-need-coins">{{ needGoldbeans }}</view>
				<view class="activity-confirm-need-text">需要消耗金豆</view>	
				<view class="agreement" v-if="!isExcessReturn">
					<view class="checkbox" >
						<view class="choiced-box" v-if="agreement" @click="handleClick">
							<image src="/static/images/choicedicon.png" mode=""></image>
						</view>
						<view class="show-box" v-else @click="handleClick">
							<view></view>
						</view>
						<view @click="agreementClick">我已阅读并同意</view>
						<view class="agreement-href" @click="openAgreement()">《寄售协议》</view>
					</view>
				</view>
				<view class="paid-complete-operation"  @click="applySumbit()">
					<view>确定</view>
				</view>
			</view>
			<view class="activity-again-sell-state" v-if="!isExcessReturn&&applyComplete&&isrReSellSuccess">
				<image src="/static/images/success.png" class="sell-success-icon" mode=""></image>
				<view class="sell-state-text">寄售成功</view>
				<view class="look-order" @click="goOrderDetail()">查看订单</view>	
			</view>
			<view class="activity-again-sell-state" v-if="!isExcessReturn&&applyComplete&&!isrReSellSuccess">
				<image src="/static/images/fail.png" class="sell-success-icon" mode=""></image>
				<view class="sell-state-text">寄售失败</view>
				<view class="sell-state-text-tips sell-state-text-tips1">金豆余额不足</view>
				<view class="sell-state-text-tips">可通过购买黄金风爆原价商品</view>
				<view class="buy-gold-coinds-now" @click="goBuyBeans()">去购买</view>
			</view>
			<view class="activity-again-sell-state" v-if="isExcessReturn&&applyComplete&&!isrReSellSuccess">
				<image src="/static/images/fail.png" class="sell-success-icon" mode=""></image>
				<view class="sell-state-text">申请失败</view>
				<view class="sell-state-text-tips sell-state-text-tips1">金豆余额不足</view>
				<view class="sell-state-text-tips">可通过购买黄金风爆原价商品</view>
				<view class="buy-gold-coinds-now" @click="goBuyBeans()">去购买</view>
			</view>
			<view class="activity-again-sell-state" v-if="isExcessReturn&&applyComplete&&isrReSellSuccess">
				<image src="/static/images/success.png" class="sell-success-icon" mode=""></image>
				<view class="sell-state-text">申请成功</view>
				<view class="look-order" @click="lookOrder()">查看订单</view>
			</view>
		</view>
	</view>
</template>

<script>
	/* function getRequestParams() {
			let url = location.href;
			let requestParams = {};
			if (url.indexOf('?') !== -1) {
				let str = url.substr(url.indexOf('?') + 1);
				let strs = str.split('&');
				for (let i = 0; i < strs.length; i++) {
					requestParams[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1]);
				}
			}
			return requestParams;
	}
	let params = getRequestParams();
	let token = params['token'];
	let status_bar =  params['status_bar'];
	let source = 'wap'
	if(token!=undefined){
		uni.setStorage({
		    key: 'token',
		    data: token
		})
		source = 'app'
	}
	if(status_bar!=undefined){
		uni.setStorage({
		    key: 'status_bar',
		    data: status_bar
		})
	} */
	import store from "store"
	import {mapGetters,mapMutations,mapActions} from 'vuex'
	import { goldProductBatchReselling,goldProductSplitting} from "api/goldstormApi.js"
	export default {
		store,
		computed:{
			...mapGetters([
				'user',
				'statusBar'
			])
		},
		data(){
			return {
					source:source,
					agreement:true,
					title:'确认寄售',
					isExcessReturn:false,
					applyComplete:false,
					records:[],
					needGoldbeans:0,
					address_id:null,
					gold_record_id:null,
					isrReSellSuccess:null,
					price:null
			}
		},
		methods:{
			...mapMutations([
				'setUser',
				'setStatusBar'
			]),
			back(){
				if(this.source == 'wap'){
					uni.navigateBack()
				}else{
					// window.flutter_inappwebview.callHandler('back_to_app', '')
					backToApp.postMessage('back');
				}
			},
			goOrderDetail(){
				var pages= getCurrentPages()
				var prevPage = pages[pages.length-2]
				prevPage.$vm.backEventSelling()
				uni.navigateBack()
			},
			lookOrder(){
				var pages= getCurrentPages()
				var prevPage = pages[pages.length-2]
				prevPage.$vm.backEventSelling()
				uni.navigateBack()
			},
			goBuyBeans(){
				uni.reLaunch({
					url:'/pages/activity/activity'
				})
			},
			agreementClick() {
				this.agreement = !this.agreement
			},
			openAgreement(){
				uni.navigateTo({
					url:'/packs/pages/activity/activityResellAgreement'
				})
			},
			async applySumbit(){
				if(this.agreement){
					if(this.isExcessReturn){
						await this.goldProductSplitting()
					}else{
						let parms = { records:this.records }
						const response =  await goldProductBatchReselling(parms)
						if(response.message){
							if(Object.values(response.errors)[0][0]=='金豆余额不足'){
								this.applyComplete = true
								this.isrReSellSuccess = false
							}else{
								uni.showModal({
								  title: '提示', content: Object.values(response.errors)[0][0], showCancel: false
								})
							}
						}else{
							this.applyComplete = true
							this.isrReSellSuccess = true
						}
					}
				}else{
					uni.showModal({
					  title: '提示', content: '请阅读并同意寄售协议！', showCancel: false
					})
				}
			},
			async goldProductSplitting(){
				let parms = {
					record:this.gold_record_id
				}
				const response =  await goldProductSplitting(parms)
				if(response.errors){
					if(response.errors.err[0]=='金豆余额不足'){
						this.applyComplete = true
						this.isrReSellSuccess = false
					}else{
						uni.showModal({
							title: '提示', content: Object.values(response.errors)[0][0], showCancel: false,
							success: (res) => {
								if (res.confirm) {
									uni.navigateBack()
								}
							}
						})
					}
				}else{
					if(!response.message){
						this.applyComplete = true
						this.isrReSellSuccess = true
					}else{
						uni.showModal({
							title: '提示', content: Object.values(response.errors)[0][0], showCancel: false,
							success: (res) => {
								if (res.confirm) {
									uni.navigateBack()
								}
							}
						})
					}
				}	
			}
		},
		async onShow(){
			if(status_bar!=undefined){
				this.setStatusBar(status_bar)
			}
		},
		onLoad(options) {
			if(options.isExReturn) {
				this.isExcessReturn = JSON.parse(options.isExReturn)
				if(this.isExcessReturn){
					this.title = '确认申请超额返'
				}
			}
			this.records = JSON.parse(decodeURIComponent(options.records))
			this.price = options.price
			this.needGoldbeans = options.needGoldbeans
			if(options.gold_record_id){
				this.gold_record_id = options.gold_record_id
			}
			if(options.address_id){
				this.address_id = options.address_id
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F6F6F6;
	}
	.status {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;
		background: #F6F6F6;
	}
	.navigation{
		width: 100%;
		height: 100rpx;
		background: #F6F6F6;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left:0;
		top:0;
		z-index:999;
	}
	.navigation-position{
		width: 100%;
		height: 100rpx;
		background: rgba(0,0,0,0);
	}
	.back{
		display: block;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 26rpx;
		left:32rpx;
	}
	.navigation-title{
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}
	.activity-paid-state-content{
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 50rpx auto;
		padding: 64rpx 0;
	}
	.activity-again-sell-state{
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 50rpx auto;
		padding: 64rpx 0;
	}
	.sell-success-icon{
		display: block;
		width: 96rpx;
		height: 96rpx;
		margin:0 auto;
	}
	.sell-state-text{
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 40rpx;
		text-align: center;
		margin-top: 24rpx;
	}
	.sell-state-text-tips1{
		margin-top: 22rpx;
	}
	.sell-state-text-tips{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40rpx;
		text-align: center;
		margin-bottom: 8rpx;
	}
	.look-order{
		width: 458rpx;
		height: 82rpx;
		border-radius: 48rpx;
		border: 2rpx solid #FF6011;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FF9500;
		margin: 80rpx auto 0;
	}
	.buy-gold-coinds-now{
		width: 460rpx;
		height: 84rpx;
		background: #FF9500;
		border-radius: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		margin: 80rpx auto 0;
	}
	.activity-confirm-content-title{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 36rpx;
		text-align: center;
	}
	.activity-confirm-need-coins{
		font-size: 84rpx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #333333;
		line-height: 96rpx;
		text-align: center;
		margin-top: 48rpx;
	}
	.activity-confirm-need-text{
		margin: 16rpx 0 76rpx 0;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40rpx;
		text-align: center;
	}
	.pay-state-text-tips{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40rpx;
		text-align: center;
		margin-bottom: 8rpx;
	}
	.paid-complete-operation{
		display: flex;
		justify-content: center;
		margin-top:26rpx;
		>view{
			width: 460rpx;
			height: 84rpx;
			background: #FF9500;
			border-radius: 48rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.goods-back-home{
		border: 1rpx solid #FF6011;
		color: #FF9500;
		margin-right: 32rpx;
	}
	.apply-excess-return{
		background: #FF9500;
		color: #FFFFFF;
	}
	.agreement-text{
		display: flex;
		a{
			text-decoration: none;
			color: #FB0016;
		}
	}
	.agreement{
		display: flex;
		justify-content: center;
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		width: 100%;
		margin-bottom: 20rpx;
	}
	.checkbox{
		display: flex;
		align-items: center;
		.choiced-box{
			width: 36rpx;
			height:36rpx;
			border-radius:50%;
			margin-right: 5rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			>image{
				display: block;
				width:36rpx;
				height:36rpx;
			}
		}
		.show-box{
			width: 36rpx;
			height:36rpx;
			border-radius:50%;
			margin-right: 5rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			>view{
				width: 26rpx;
				height: 26rpx;
				border-radius:50%;
				margin-right: 5rpx;
				border: 2rpx solid #333333;
			}
		}
		.agreement-href{
			color:#FF9500;
		}
	}
</style>	